<template>
		<div>
				<el-row>
						<el-col :span="12">
								<el-input placeholder="请输入职称" prefix-icon="el-icon-plus" style="width: 50%;margin-right: 10px"
																		v-model="jobForm.name"></el-input>
								<el-select style="width: 20%;margin-right: 10px" placeholder="职称等级" v-model="jobForm.titlelevel"
																			:clearable="true">
										<el-option v-for="(item,index) in titleLevels" :label="item" :value="item" :key="index"></el-option>
								</el-select>
								<el-button type="primary" icon="el-icon-plus" @click="saveJobLevels">添加</el-button>
								<el-button type="danger" icon="el-icon-delete" :disabled="multipleSelection.length <=0"
																			@click="deleteBatchJobLevels">批量删除
								</el-button>
						</el-col>
				</el-row>
				<el-row>
						<el-table
										ref="multipleTable"
										:data="jobDatas"
										:border="true"
										tooltip-effect="dark"
										style="width: 100%"
										@selection-change="multipleSelect">
								<el-table-column align="center" type="selection" width="55"></el-table-column>
								<el-table-column align="center" prop="id" label="编号"></el-table-column>
								<el-table-column align="center" prop="name" label="职称名称"></el-table-column>
								<el-table-column align="center" prop="titlelevel" label="职称级别"></el-table-column>
								<el-table-column align="center" prop="enabled" label="是否启用">
										<template v-slot="scope">
												<el-switch
																v-model="scope.row.enabled" @change="changeJobLevelsEnabled(scope.row)">
												</el-switch>
										</template>
								</el-table-column>
								<el-table-column align="center" prop="createdate" label="创建时间"></el-table-column>
								<el-table-column align="center" label="操作">
										<template v-slot="scope">
												<el-button
																size="mini"
																@click="editHandler(scope.row)">编辑
												</el-button>
												<el-button
																size="mini"
																type="danger"
																@click="deleteJobLevel(scope.row)">删除
												</el-button>
										</template>
								</el-table-column>

						</el-table>
				</el-row>
				<el-dialog title="编辑信息" :visible.sync="dialogFormVisible" width="30%" :before-close="resetForm">
						<el-form :model="jobForm" ref="updateJobForm" :rules="updateJobFormRules" label-width="100px">
								<el-form-item label="职称名称" prop="name">
										<el-input v-model="jobForm.name" autocomplete="off" style="width: 70%;"></el-input>
								</el-form-item>
								<el-form-item label="职称等级" prop="titlelevel">
										<el-select v-model="jobForm.titlelevel" placeholder="请选择职称等级" :clearable="true" style="width: 70%;">
												<el-option v-for="(item,index) in titleLevels" :label="item" :value="item" :key="index"></el-option>
										</el-select>
								</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
								<el-button @click="resetForm">取 消</el-button>
								<el-button type="primary" @click="updateJobLevels">确 定</el-button>
						</div>
				</el-dialog>
		</div>
</template>

<script>
export default {
		name: "JobTitleManager",
		data() {
				return {
						jobForm: {
								id: '',
								name: '',
								titlelevel: ''
						},
						jobDatas: [],
						titleLevels: [
								'正高级',
								'副高级',
								'中级',
								'初级',
								'员级'
						],
						multipleSelection: [],
						dialogFormVisible: false,
						updateJobFormRules: {
								name: [
										{required: true, message: '请输入职称名称', trigger: 'blur'},
										{min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur'}
								],
								titlelevel: [
										{required: true, message: '请至少选择一个职称等级', trigger: 'change'}
								]
						}
				}
		},
		mounted() {
				this.init();
		},
		methods: {
				init() {
						this.listJobLevels();
				},
				listJobLevels() {
						this.$get('/system/basic/jobLevel/listJobLevels').then(res => {
								const {data} = res;
								if (data) {
										this.jobDatas = data
								}
						})
				},
				multipleSelect(item) {
						this.multipleSelection = item.map(x => x.id);
				},

				// 修改职称状态
				changeJobLevelsEnabled(jobLevel) {
						this.$confirm(`是否${jobLevel.enabled ? '【启用】' : '【禁用】'}${jobLevel.name}`, '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
						}).then(res => {
								this.updateJobLevelEnable(jobLevel)
						}).catch(error => {
								jobLevel.enabled = !jobLevel.enabled
								this.$message.info("取消修改")
						})
				},

				// 修改禁用状态
				updateJobLevelEnable(jobLevel) {
						this.$put("/system/basic/jobLevel/updateJobLevel", jobLevel).then(res => {
								this.listJobLevels()
						})
				},

				// 编辑按钮事件
				editHandler(jobLevel) {
						this.dialogFormVisible = true;
						this.$nextTick(() => {
								this.jobForm = {...jobLevel}
						})
				},

				// 修改职称等级
				updateJobLevels() {
						this.$refs.updateJobForm.validate(valid => {
								if (valid) {
										this.$put("/system/basic/jobLevel/updateJobLevel", this.jobForm).then(res => {
												this.listJobLevels()
												this.resetForm()
										})
								}
						})
				},

				// 重置表单
				resetForm() {
						this.$refs.updateJobForm.resetFields();
						this.dialogFormVisible = false;
				},

				// 添加一个职称
				saveJobLevels() {
						if (this.jobForm.name.length > 1 && this.jobForm.titlelevel !== '' && this.jobForm.titlelevel !== undefined) {
								this.$post("/system/basic/jobLevel/saveJobLevel", this.jobForm).then(res => {
										this.listJobLevels()
										this.jobForm = {
												id: '',
												name: '',
												titlelevel: ''
										}
								})
						} else {
								this.$message.error("职称名称的长度不小于3")
						}
				},

				// 批量删除
				deleteBatchJobLevels() {
						this.$confirm(`此操作将永久删除【${this.multipleSelection.length}】条数据, 是否继续?`, '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
						}).then(res => {
								this.$del("/system/basic/jobLevel/deleteBatchJobLevelByIds", this.multipleSelection).then(res => {
										this.listJobLevels()
								})
						})
				},

				// 删除
				deleteJobLevel(scope) {
						this.$confirm(`确认删除【${scope.name}】, 是否继续?`, '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
						}).then(res => {
								this.$del("/system/basic/jobLevel/deleteJobLevelById", scope.id).then(res => {
										this.listJobLevels()
								})
						})
				},
		},
}
</script>

<style scoped>

</style>
